import { useState } from "react";
import { Input } from "antd";
import "./index.less";

interface AddInputProps {
  addName: string; // 添加的名称
  placeholder: string; // 提示词
  icon: string;
  length?: number; // 输入长度
  onPressEnter: (str: string) => void;
}

const AddInput = ({
  addName,
  placeholder,
  icon,
  length = 15,
  onPressEnter,
}: AddInputProps) => {
  const [isCreate, setIsCreate] = useState(false);
  const [createName, setCreateName] = useState("");

  return (
    <>
      <div
        className="add-box"
        onClick={() => {
          setIsCreate(true);
        }}>
        <i className={`iconfont ${icon}`}></i>
        <span>{addName}</span>
      </div>
      {isCreate ? (
        <div className="create-group">
          <Input
            placeholder={`输入${placeholder}后回车`}
            value={createName}
            maxLength={length}
            autoFocus
            onBlur={() => {
              setIsCreate(false);
            }}
            onPressEnter={(e: any) => {
              setCreateName("");
              // setIsCreate(false);
              onPressEnter(createName);
              e.stopPropagation();
            }}
            onChange={(e: any) => {
              setCreateName(e.target.value);
            }}
          />
        </div>
      ) : null}
    </>
  );
};

export default AddInput;
